<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>

		<div id="app">
			用户名：<input type="text" v-model.lazy="myForm.username" /><br>
			密码：<input type="password" v-model="myForm.password" /><br>
			确认密码：<input type="password" v-model="myForm.beginpassword" /><br>
			年龄： <input type="text" v-model.number="myForm.age"> <br>
			籍贯： <input type="text" v-model.trim="myForm.address"> <br>
			
			性别：
			<input type="radio" v-model="myForm.sex" value="0" />男
			<input type="radio" v-model="myForm.sex" value="1" />女<br>
			
			
			爱好：
			<input type="checkbox" v-model="myForm.like" value="0" />读书
			<input type="checkbox" v-model="myForm.like" value="1" />体育
			<input type="checkbox" v-model="myForm.like" value="2" />旅游<br>
			
			
			
			国籍：
			<select v-model="myForm.nationality">
				<option value="中国">中国</option>
				<option value="美国">美国</option>
				<option value="英国">英国</option>
			</select><br>
			个人简介：<textarea v-model="myForm.brief" rows="5" cols="30"></textarea><br>
			
			
			
			<input type="button" value="提交" @click="handler" />

		</div>

		<script>
			let vm = new Vue({
				el: '#app',
				data: {
					myForm:{
						username:'',
						password:'',
						beginpassword:'',
						sex:'0',
						like:[],
						nationality:'',
						brief:'',
						age:'',
						address:''
					}
				},
				methods:{
					handler(){
						//可以拿到 表单项目 提交到后端
						
						console.log(this.myForm);
						
						//发送网路请求，jquery。。。
						//axios 	
					}
				},
				watch:{
					myForm:{
						deep:true,
						handler(v1,v2){
							// console.log(v1.username)
							// console.log(v1.password)
							console.log(v1.address)
							// console.log(v1.age)
							// console.log('加一岁',v1.age+1)
							// console.log('加一岁',parseInt(v1.age)+1)
							
						}
					}
				}
			});
		</script>

	</body>
</html>
